<template>
    <!-- 新增底部信息栏 -->
    <div class="info-bar">
        <!-- 定位输入区（下部） -->
         
        <div class="location-input">
            <el-input placeholder="输入经纬度（例: 116.404,39.915）" size="small" v-model="locationInput" />
            <el-button size="small" @click="handleLocation">定位</el-button>
        </div>
    </div>
</template>
<script lang="ts">
import { Vue, Prop, Component } from 'vue-property-decorator';

@Component
export default class BootomInfoBar extends Vue {
   
    @Prop() selectedFeature:any = null;
    @Prop() map;

    private locationInput:any = '';

    private handleLocation() {
        if (!this.locationInput) return;

        const coords = this.locationInput.split(',').map(Number);
        if (coords.length !== 2 || coords.some(isNaN)) {
            this.$message.error("请输入有效的经纬度，格式：经度,纬度");
            return;
        }
        this.map.setCenter(coords);
        this.$message.success(`已定位到：${this.locationInput}`);
    }
}
</script>
<style scoped>
.info-bar {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 12px;
    background: #fff;
    border-top: 1px solid #e8e8e8;
    box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.08);
}

/* 定位输入区单独一行在底部 */
.location-input {
    display: flex;
    gap: 10px;
    width: 100%;
    border-top: 1px dashed #eee;
}

.location-input .el-input {
    flex: 1;
}

</style>